<template>
  <view class="content">
    <!-- 首页 -->
    <image class="top-bg" src="../../../static/img/top-bg.png" mode="widthFix" />
    <view class="page-content">
      <image class="logo" src="../../../static/img/logo.png" mode="widthFix"></image>
      <view class="search-btn" @click="navToSearch()">
        <image class="search-icon" src="../../../static/img/shousuo.png" mode="widthFix"></image>
        <view class="search-word">请输入您想要的宝贝</view>
      </view>
      <view class="mar-top-10">
        <u-tabs :list="tabList" :is-scroll="true" bar-width="60" :bold="true" bg-color="#FF7E00" active-color="#F7F7F7" inactive-color="#F7F7F7" :current="type" @change="stateChange"></u-tabs>
      </view>
      <swiper v-if="type == 0" class="banner" indicator-dots indicator-color="#FFFFFF" indicator-active-color="#FF7911" autoplay>
        <swiper-item class="banner-item" v-for="(item,index) in bannerList" v-bind:key="index" @click="itemTap(item)">
          <image :src="item.banner" mode="widthFix"></image>
        </swiper-item>
      </swiper>

      <view v-if="type == 0" class="nav-box">
        <view class="nav-item" v-for="(item,index) in iconList" v-bind:key="index" @click="itemTap(item)">
          <image class="nav-image" :src="item.icon" mode="widthFix"></image>
          <view class="nav-text">{{item.title}}</view>
        </view>
      </view>
      <!-- <view v-if="type == 0" class="ad" @click="showToast">
                <view class="text-box">
                    <view class="text1">购商城会员享更多</view>
                    <view class="text2">福利</view>
                </view>
            </view> -->
      <view v-if="type == 0" class="activity-box mar-top-20">
        <view class="activity-item"  :style="{background: 'url( '+ home.smallImage +')'}" @click="specialClick(home)">
          <view class="activity-title">{{home.title}}</view>
          <view class="activity-lable">{{home.subTitle}}</view>
        </view>
        <view class="activity-item"  :style="{background: 'url( '+ day.smallImage +')'}" @click="specialClick(day)">
          <view class="activity-title">{{day.title}}</view>
          <view class="activity-lable">{{day.subTitle}}</view>
        </view>
        <view class="activity-item"  :style="{background: 'url( '+ good.smallImage +')'}" @click="specialClick(good)">
          <view class="activity-title">{{good.title}}</view>
          <view class="activity-lable">{{good.subTitle}}</view>
        </view>
        <view class="activity-item"  :style="{background: 'url( '+ single.smallImage +')'}" @click="specialClick(single)">
          <view class="activity-title">{{single.title}}</view>
          <view class="activity-lable">{{single.subTitle}}</view>
        </view>
      </view>
      <view v-if="type == 0" class="weekStore mar-left-30">
        <view class="mar-left-30 mar-top-30 flex-items">
          <image class="weekStore-titleImg" src="../../../static/img/index/weekStore_titleImg.png"></image>
          <label class="fs36 fs-bold mar-left-20">每周好店</label>
        </view>
        <swiper class="weekStore-swiper mar-top-30" :indicator-dots="true" :autoplay="true">

          <swiper-item class="store-box" v-for="(item,index) in shopList" v-bind:key="index" @click="goGoods(item)">
            <view class="store-backImg" :style="{backgroundImage:'url('+ item.imgs[0] +')'}">
              <view class="pad-top-20">
                <view class="store-namebox flex-items-plus">
                  <label class="store-name fs22">{{item.storeDTO.storeName}}</label>
                  <image class="store-logo mar-left-20" :src="item.storeDTO.logo"></image>
                </view>
              </view>
            </view>
            <view class="storeDetail-box">
              <view class="pad-top-20">
                <label class="shop-title fs30 mar-left-20">{{item.productName}}</label>
              </view>
              <view class="storePrice-box flex-start flex-row">
                <view class="flex-items-plus flex-row price-box">
                  <view class="font-color-FF7800">
                    <label class="fs24">¥ </label>
                    <label class="fs30"> {{fenToYuan(item.price)}}</label>
                  </view>
                  <view class="fs24 font-color-999 discountsPrice mar-left-20">
                    <label>¥ </label>
                    <label class="fs24 "> {{fenToYuan(item.applyPrice)}}</label>
                  </view>
                </view>
                <view class="inStoreshop" @click.stop="goStore(item)">进店逛逛</view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view v-if="type == 0" class="goodRecommend mar-left-10">
        <view class="mar-left-30 mar-top-30 flex-items">
          <image class="goodRecommend-titleImg" src="../../../static/img/index/goodRecommend_titleImg.png"></image>
          <label class="fs36 fs-bold mar-left-20">好物推荐</label>
        </view>
        <view class="goos-box" >
          <view class="goodRecommend-box mar-left-20 mar-top-30 flex-display flex-column" v-for="(item,index) in goodsList" v-bind:key="index" @click="goGoods(item)">
            <view class="goodsImg-box">
              <image class="recommendGoodsImg" :src="item.imgs[0]"></image>
            </view>
            <view class="goodRecommendDetail-box">
              <label class="fs28 mar-left-20 recommendGoods-title mar-top-20">{{item.productName}}</label>
              <label class="fs24 font-color-999 mar-left-20 mar-top-5">{{item.buyCount}}人付款</label>
              <view class="mar-left-20 mar-top-5 flex-display flex-row flex-sp-between">
                <view class="font-color-FF7800">
                  <label class="fs24">¥ </label>
                  <label> {{fenToYuan(item.price)}}</label>
                </view>
                <view class="fs24 font-color-999 discountsPriceLine pad-right-20">
                  <label>¥ </label>
                  <label> {{fenToYuan(item.applyPrice)}}</label>
                </view>

              </view>
              <view class="mar-left-20 pad-bot-20 mar-top-10 fs22 flex-display flex-sp-between flex-items" @click.stop="goStore(item)">
                <label class="font-color-999">{{item.storeDTO.storeName}}</label>
                <image class="storeArrow-icon pad-right-20" src="../../../static/images/arrow-right.png"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="goodRecommend backColorFFF">
        <view class="goos-box mar-left-10" v-if="categoryListLen>0">
          <view class="goodRecommend-box mar-left-20 mar-top-30 flex-display flex-column" v-for="(item,index) in goodsCategoryList" v-bind:key="index" @click="goGoods(item)">
            <view class="goodsImg-box">
              <image class="recommendGoodsImg" :src="item.imgs[0]"></image>
            </view>
            <view class="goodRecommendDetail-box">
              <label class="fs28 mar-left-20 recommendGoods-title mar-top-20">{{item.productName}}</label>
              <label class="fs24 font-color-999 mar-left-20 mar-top-5">{{item.buyCount}}人付款</label>
              <view class="mar-left-20 mar-top-5 flex-display flex-row flex-sp-between">
                <view class="font-color-FF7800">
                  <label class="fs24">¥ </label>
                  <label> {{fenToYuan(item.price)}}</label>
                </view>
                <view class="fs24 font-color-999 discountsPriceLine pad-right-20">
                  <label>¥ </label>
                  <label> {{fenToYuan(item.applyPrice)}}</label>
                </view>
              </view>
              <view class="mar-left-20 pad-bot-20 mar-top-5 fs22 flex-display flex-sp-between flex-items" @click.stop="goStore(item)">
                <label>{{item.storeName}}</label>
                <image class="storeArrow-icon pad-right-20" :src="item.storeLogo"></image>
              </view>
            </view>
          </view>
        </view>
        <view v-if="categoryListLen == 0" class="emptyCart-box flex-items-plus flex-column">
          <image class="emptyCart-img" src="../../../static/img/bgnull.png"></image>
          <label class="font-color-999 fs26 mar-top-30">这里空空如也~</label>
        </view>
      </view>
      <view class="mar-top-30"></view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  export default {
    data () {
      return {
        swiperList: [],
        bannerList: [],
        iconList: [],
        imageList: [],
        shopList: [],
        goodsList: [],
        type: 0,
        tabList: [],
        goodsCategoryList: [],
        categoryListLen: 0,
        home: {},
        day: {},
        good: {},
        single: {}
      }
    },
    onLoad () {
      this.getBanner()
      this.getShopList()
      this.getGoodList()
      this.getCategoryLIstanbul()
      this.getRoute()
      this.getQueryResourcePit()
      this.getSubjectDetailByKeyList()
    },

    methods: {
      getSubjectDetailByKeyList () {
        NET.request1(API.SubjectDetailByKeyList + 'single,good,home,day', null, 'GET').then(res => {
          this.home = res.data[0]
          this.day = res.data[1]
          this.good = res.data[2]
          this.single = res.data[3]
        }).catch(res => {

        })
      },
      getQueryResourcePit () {
        uni.showLoading({
          title: '加载中...'
        })
        NET.request1(API.QueryResourcePit, {
        }).then(res => {
          uni.hideLoading()
          this.iconList = res.data
        }).catch(res => {
          uni.hideLoading()
        })
      },
      navToSearch () {
        uni.navigateTo({
          url: `/pages/search/index/index`
        })
      },
      showToast () {
        this.$refs.uToast.show({
          title: 'uView Toast',
          type: 'default',
          position: 'bottom'
        })
      },
      // 专题路由
      getRoute () {
        NET.request1(API.ResourcePit, {
        }).then(res => {
          console.log(res, 66666)
        }).catch(res => {
        })
      },
      // 专题
      specialClick (tabType) {
        console.log(tabType)
        uni.navigateTo({
          url: '../../homeModule/special?key=' + tabType.subjectKey
        })
      },
      getBanner () {
        uni.showLoading({
          title: '加载中...'
        })
        NET.request1(API.QuerySubjectDetail + 'topbanner', null, 'GET').then(res => {
          uni.hideLoading()

          this.bannerList.push(res.data)
        }).catch(res => {
          uni.hideLoading()
        })
      },
      // 获取每周好店商品ids
      getShopList () {
        uni.showLoading({
          title: '加载中...'
        })
        NET.request1(API.QuerySubjectDetail + 'good_store', null, 'GET').then(res => {
          uni.hideLoading()
          this.getQuerySubjectProduct(1, res.data.id)
        }).catch(res => {
          uni.hideLoading()
        })
      },
      getQuerySubjectProduct (type, subjectId) {
        uni.showLoading({
          title: '加载中...'
        })
        NET.request1(API.QuerySubjectProduct, {
          current: 1,
          map: {},
          model: {
            subjectId: subjectId
          },
          order: 'ascending',
          size: 10,
          sort: 'id'

        }, 'POST').then(res => {
          uni.hideLoading()
          if (type == 1) {
            this.shopList = res.data.productVOList
            console.log(this.shopList, 8989)
          } else if (type == 2) {
            this.goodsList = res.data.productVOList
          }
        }).catch(res => {
          uni.hideLoading()
        })
      },
      //
      // 获取好物推荐商品ids
      getGoodList () {
        uni.showLoading({
          title: '加载中...'
        })
        NET.request1(API.QuerySubjectDetail + 'good_recommend', null, 'GET').then(res => {
          uni.hideLoading()
          this.getQuerySubjectProduct(2, res.data.id)
        }).catch(res => {
          uni.hideLoading()
        })
      },
      // 根据商品分类id或者商品id获取商品信息
      getFindList (type, categoryIdList, productIdList) {
        // type 1 获取每周好店信息 2 获取好物推荐商品信息
        uni.showLoading({
          title: '加载中...'
        })
        NET.request(API.FindList, {
          categoryIdList: categoryIdList,
          productIdList: productIdList
        }, 'POST').then(res => {
          uni.hideLoading()
          if (type == 1) {
            this.shopList = res.data.goodsList
          } else if (type == 2) {
 [
            this.goodsList = res.data.goodsList

          ]
}
        }).catch(res => {
          uni.hideLoading()
        })
      },
      itemTap (item) {
        if (item.route) {
          uni.navigateTo({
            url: '/' + item.route
          })
        }
      },

      goStore (item) {
        uni.navigateTo({
          url: `/pages/store/index?storeId=${item.storeId}`
        })
      },
      goGoods (item) {
        uni.navigateTo({
          url: `/pages/goodsModule/goodsDetails?id=${item.id}`
        })
      },
      fenToYuan (value) {
        if (!value) {
          return '0.00'
        }
        value = value / 100.0
        return value.toFixed(2) // 此处2为保留两位小数，保留几位小数，这里写几
      },
      stateChange (index) {
        this.type = index
        let listId = this.tabList[index].id
        this.getChildCategory(listId)
      },
      // 获取顶部分类
      getCategoryLIstanbul () {
        this.tabList.push({id: 0, name: '首页'})
        uni.showLoading({
          title: '加载中...'
        })
        NET.request(API.FindCategoryListByDepth).then(res => {
          for (let i = 0; i < res.data.length; i++) {
            this.tabList.push({id: res.data[i].id, name: res.data[i].categoryName})
          }
        }).catch(res => {
          uni.hideLoading()
        })
      },
      getChildCategory (listId) {
        if (listId != 0) {
          uni.showLoading({
            title: '加载中...'
          })
          NET.request(API.FindList, {
            categoryIdList: [listId]
          }, 'POST').then(res => {
            uni.hideLoading()
            this.goodsCategoryList = res.data.categoryList
            this.categoryListLen = res.data.categoryList.length
          }).catch(res => {
            uni.hideLoading()
          })
        }
      }
    }
  }
</script>

<style lang='scss'>
  .content {
    width: 100%;
    display: flex;
    flex-direction: column;

    .top-bg {
      width: 100%;
    }

    .page-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      z-index: 10;
      margin-top: -300upx;

      .logo {
        width: 190upx;
        height: 30upx;
        margin-left: 30upx;
      }

      .search-btn {
        width: 690upx;
        height: 66upx;
        background: rgba(255, 255, 255, 1);
        border-radius: 33upx;
        margin-top: 29upx;
        display: flex;
        margin-left: 30upx;
        flex-direction: row;
        align-items: center;

        .search-icon {
          width: 36upx;
          height: 36upx;
          margin-left: 33upx;
        }

        .search-word {
          font-size: 26upx;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          margin-left: 10upx;
        }
      }

      .banner {
        margin-left: 30upx;
        margin-top: 30upx;
      }

      .banner,
      .banner-item {
        width: 690upx;
        height: 280upx;
      }

      .banner-item image {
        width: 690upx;
        height: 280upx;
      }

      .nav-box {
        width: 690upx;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 30upx;
        margin-left: 30upx;

        .nav-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          flex: 1;

          .nav-image {
            width: 100upx;
            height: 100upx;
          }

          .nav-text {
            font-size: 26upx;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
          }
        }
      }

      .ad {
        width: 690upx;
        height: 160upx;
        margin-top: 30upx;
        margin-left: 30upx;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-image: url(../../../static/images/guanggao.png);
        background-repeat: no-repeat;
        background-size: cover;

        .text-box {
          display: flex;
          flex-direction: row;
          align-items: baseline;

          .text1 {
            font-size: 34upx;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            margin-left: 43upx;
          }

          .text2 {
            font-size: 44upx;
            font-weight: bold;
            color: rgba(255, 197, 1, 1);
          }
        }
      }

      .activity-box {
        width: 690upx;
        display: flex;
        flex-direction: row;
        margin-top: 30rpx;
        margin-left: 30rpx;
        .activity-item {
          width: 170upx;
          height: 230upx;
          background-repeat: no-repeat !important;
          background-size: cover !important;
          display: flex;
          flex-direction: column;
          padding-left: 10upx;

          .activity-title {
            font-size: 28upx;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
          }

          .activity-lable {
            font-size: 22upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
          }
        }

        .ad1 {
          background-image: url(../../../static/images/01.png);
        }

        .ad2 {
          background-image: url(../../../static/images/02.png);
        }

        .ad3 {
          background-image: url(../../../static/images/03.png);
        }

        .ad4 {
          background-image: url(../../../static/images/04.png);
        }
      }

      .weekStore-titleImg {
        width: 44upx;
        height: 44upx;
      }

      .weekStore-swiper {
        width: 690upx;
        height: 630upx;

        .store-box {
          width: 690upx;
          height: 570upx;

          .store-backImg {
            width: 690upx;
            height: 414upx;
            background-image: url(../../../static/img/index/store_backImg.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-size: 690upx 414upx;
          }

          .store-namebox {
            display: flex;
            min-width: 130upx;
            max-width: 260rpx;
            flex-direction: row;
            height: 40upx;
            text-align: center;
            background-color: #FFFFFF;
            border-radius: 0 20upx 20upx 0;

            .store-name {
              padding: 0upx 0upx;
            }

            .store-logo {
              width: 38upx;
              height: 38upx;
            }
          }

          .storeDetail-box {
            background-color: #FFFFFF;

            box-shadow: 1px 10upx 15upx 0px rgba(52, 52, 52, 0.1);
            border-radius: 10upx;

            .discountsPrice {
              text-decoration: line-through;
            }

            .price-box {
              padding: 20upx 24upx;
            }

            .inStoreshop {
              position: absolute;
              right: 50upx;
              color: #FFFFFF;
              background-color: #FF7700;
              border-radius: 24upx;
              font-size: 24rpx;
              padding: 12upx 24upx;
            }

            .shop-title {
              overflow: hidden;
              text-overflow: ellipsis;
              -ms-text-overflow: ellipsis;
              display: box;
              display: -webkit-box;
              line-clamp: 1;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
          }
        }

      }

      .goodRecommend {
        .goos-box {
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
        }

        .goodRecommend-titleImg {
          width: 44upx;
          height: 44upx;
        }

        .goodsImg-box {
          width: 336upx;
          height: 336upx;
          box-shadow: 0px 0px 15upx 0px rgba(52, 52, 52, 0.15);
          border-radius: 10upx 10upx 0 0;
        }

        .recommendGoodsImg {
          width: 336upx;
          height: 336upx;
          border-radius: 10upx 10upx 0 0;
        }

        .storeArrow-icon {
          width: 20upx;
          height: 20upx;
        }

        .recommendGoods-title {
          width: 295upx;
          display: block;
          word-break: keep-all;
          /* 不换行 */
          white-space: nowrap;
          /* 不换行 */
          overflow: hidden;
          /* 内容超出宽度时隐藏超出部分的内容 */
        }

        .goodRecommend-box {
          width: 336upx;

          .goodRecommendDetail-box {
            background-color: #FFFFFF;
            box-shadow: 0px 0px 15upx 0px rgba(52, 52, 52, 0.15);
            border-radius: 0 0 10upx 10upx;
          }

          .recommendGoodsDes {
            width: 295upx;
          }
        }
      }
    }

  }
  .emptyCart-box {
    margin-top: 70upx;

    .emptyCart-img {
      width: 270upx;
      height: 270upx;
    }
  }
</style>
